<template>
	<div id="app">
		<button @click="counterAdd">+</button>
		<button @click="counterSub">-</button>
		<p>counter:{{$store.state.counter}}</p>
		<p>大于35岁的学生:{{$store.getters.studentsMoreThan35}}</p>
		<p>大于35岁的学生数量:{{$store.getters.studentsMoreThan35.length}}</p>
		<p>根据年龄查找大于35岁的学生:{{$store.getters.studentsMoreThan35ByAge(37)}}</p>
		<button @click="sendParams">mutation传递参数</button>
		<button @click="mutationCommit">不一样的mutations提交方式</button>
		<button @click="stateAddProp">给vue state中的对象添加属性</button>
		<button @click="testStateSync">异步检测state</button>
		<button @click="testStateSyncByActions">异步检测state</button>
		<p>info:{{$store.state.info}}</p>
		<p>
		</p>
		<button @click="changeModuleACounter">模块A</button>
		<p>moduleA:{{$store.state.a.counter}}</p>
		<p>moduleA:{{$store.getters.counterDouble}}</p>
		<button @click="testActions">test actions</button>
	</div>
</template>       

<script>
export default {
	name: 'App',
	data() {
		return {}
	},
	methods: {
		counterAdd() {
			this.$store.commit('counterAdd', 2)
			// this.$store.state.counter++
		},
		counterSub() {
			this.$store.commit('counterSub')
		},
		sendParams() {
			this.$store.commit('sendParams', { name: 'cuifan', age: 20 })
		},
		mutationCommit() {
			this.$store.commit({
				type: 'mutationCommit',
				count: 100,
			})
		},
		stateAddProp() {
			this.$store.commit({
				type: 'update_info',
				count: 300,
			})
		},
		testStateSync() {
			this.$store.commit({
				type: 'testStateSync',
				message: 'hello world',
			})
		},
		testStateSyncByActions() {
			this.$store
				.dispatch({
					type: 'testStateSyncByActions',
					message: 'hello world',
				})
				.then(() => {
					console.log('更新成功')
				})
		},
		changeModuleACounter() {
			this.$store.commit('changeModuleACounter', {
				counter: 300,
			})
		},
		testActions() {
			this.$store.dispatch('changeModuleACounter')
		},
	},
	components: {},
}
</script>

<style>
</style>
